<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蓝天驾校 - 在线报名</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="/layui/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <link href="/layui/css/layui.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#409EFF',
                        secondary: '#66B1FF',
                        light: '#E6F7FF',
                        dark: '#1E3A8A',
                        accent: '#FF7D00'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style>
    /* 导航栏样式开始 */
    header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background-color: white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }

    .header-container {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
    }

    .logo {
        display: flex;
        align-items: center;
    }

    .logo-icon {
        width: 40px;
        height: 40px;
        background-color: #409EFF;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 10px;
    }

    .logo-text {
        font-size: 24px;
        font-weight: bold;
        color: #2c3e50;
    }

    .nav-links {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav-links li {
        margin-left: 30px;
    }

    .nav-links a {
        text-decoration: none;
        color: #34495e;
        font-size: 16px;
        font-weight: 500;
        transition: color 0.3s ease;
    }
    /* 导航栏样式结束 */
</style>


    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .nav-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            }
            .nav-link-hover {
                @apply relative overflow-hidden;
            }
            .nav-link-hover::after {
                content: '';
                @apply absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300;
            }
            .nav-link-hover:hover::after {
                @apply w-full;
            }
            .hero-gradient {
                background: linear-gradient(135deg, #409EFF 0%, #66B1FF 100%);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            .form-shadow {
                box-shadow: 0 10px 25px rgba(64, 158, 255, 0.1);
            }
            .layui-form-label {
                @apply text-gray-700 font-medium;
            }
            .layui-input:focus, .layui-textarea:focus {
                @apply border-primary ring-2 ring-primary/20;
            }
            .layui-btn-primary {
                @apply border-primary text-primary hover:bg-primary/5;
            }
            .layui-btn-normal {
                @apply bg-primary hover:bg-primary/90;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
   

    
<!-- 导航栏 -->
<header>
    <div class="header-container" style="width: 1000px;">
        <div class="logo">
            <div class="logo-icon">
                <i class="fa fa-car text-white text-xl"></i>
            </div>
            <span class="logo-text">驾校学员交流区</span>
        </div>
        <nav>
            <ul class="nav-links">
                <a href="/zrz/daohanglanLayui" class="text-dark hover:text-primary nav-link-hover font-medium">首页</a>&nbsp;&nbsp;&nbsp;
                <!-- <a href="/zrz/guanliyuanXXLayui" class="text-dark hover:text-primary nav-link-hover font-medium">管理员</a>-->
                <a href="/ljk/coach/index" class="text-dark hover:text-primary nav-link-hover font-medium">教练团队</a>&nbsp;&nbsp;&nbsp;
                <a href="/hzj/jiaxiaoguanliList" class="text-dark hover:text-primary nav-link-hover font-medium">基本信息</a>&nbsp;&nbsp;&nbsp;
                <a href="/kaiban/page" class="text-dark hover:text-primary nav-link-hover font-medium">开班信息</a>&nbsp;&nbsp;&nbsp;
                <a href="/zjy/liuyan" class="text-dark hover:text-primary nav-link-hover font-medium">用户留言</a>&nbsp;&nbsp;&nbsp;
                <a href="/zjy/zixun" class="text-dark hover:text-primary nav-link-hover font-medium">用户咨询</a>
            </ul>
        </nav>
        <a href="#" class="contact-button hidden md:block">联系客服</a>
    </div>
</header>


    <!-- 英雄区域 -->
    <section class="pt-32 pb-16 hero-gradient relative overflow-hidden">
        <!-- 背景装饰 -->
        <div class="absolute top-0 left-0 w-full h-full overflow-hidden opacity-10">
            <div class="absolute top-10 left-10 w-40 h-40 rounded-full bg-white"></div>
            <div class="absolute bottom-10 right-10 w-60 h-60 rounded-full bg-white"></div>
            <div class="absolute top-1/2 left-1/3 w-20 h-20 rounded-full bg-white"></div>
        </div>
        <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="text-center">
                <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold text-white leading-tight text-shadow mb-6">
                    专业驾驶培训<br>开启安全驾驶之旅
                </h1>
                <p class="text-[clamp(1.1rem,2vw,1.35rem)] text-white/90 mb-8 max-w-3xl mx-auto">
                    填写下方表单，立即报名蓝天驾校，专业教练团队为您提供高质量的驾驶培训服务，让您轻松考取驾照。
                </p>
                <a href="#enroll-form" class="btn-primary mx-auto">
                    <i class="fa fa-user-plus mr-2"></i> 立即报名
                </a>
            </div>
        </div>
    </section>

    <!-- 报名表单 -->
    <section id="enroll-form" class="py-16 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="max-w-4xl mx-auto">
                <div class="bg-light rounded-2xl p-8 md:p-12 form-shadow">
                    <h2 class="text-2xl md:text-3xl font-bold text-dark mb-8 text-center">学员报名登记表</h2>
                    
                    <form class="layui-form" lay-filter="enrollForm">
                        <!-- 个人信息 -->
                        <div class="layui-form-item">
                            <label class="layui-form-label">姓名</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" required lay-verify="required" placeholder="请输入您的姓名" class="layui-input">
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-block">
                                <input type="radio" name="gender" value="男" title="男" checked>
                                <input type="radio" name="gender" value="女" title="女">
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">年龄</label>
                            <div class="layui-input-block">
                                <input type="number" name="age" required lay-verify="required|number" placeholder="请输入您的年龄" class="layui-input">
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">身份证号</label>
                            <div class="layui-input-block">
                                <input type="text" name="idCard" required lay-verify="required|idcard" placeholder="请输入您的身份证号码" class="layui-input">
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">联系电话</label>
                            <div class="layui-input-block">
                                <input type="tel" name="phone" required lay-verify="required|phone" placeholder="请输入您的手机号码" class="layui-input">
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">电子邮箱</label>
                            <div class="layui-input-block">
                                <input type="email" name="email" placeholder="请输入您的电子邮箱" class="layui-input">
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">居住地址</label>
                            <div class="layui-input-block">
                                <input type="text" name="address" placeholder="请输入您的居住地址" class="layui-input">
                            </div>
                        </div>
                        
                        <!-- 选择课程 -->
                        <div class="layui-form-item">
                            <label class="layui-form-label">选择课程</label>
                            <div class="layui-input-block">
                                <select name="course" required lay-verify="required">
                                    <option value="">请选择培训课程</option>
                                    <option value="C1手动挡">C1手动挡 - ¥3880</option>
                                    <option value="C2自动挡">C2自动挡 - ¥4280</option>
                                    <option value="VIP快速班">VIP快速班 - ¥6880</option>
                                </select>
                            </div>
                        </div>
                        
                        <!-- 推荐人信息 -->
                        <div class="layui-form-item">
                            <label class="layui-form-label">推荐人</label>
                            <div class="layui-input-block">
                                <input type="text" name="referrer" placeholder="如有推荐人，请输入推荐人姓名" class="layui-input">
                            </div>
                        </div>
                        
                        <!-- 备注信息 -->
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">备注</label>
                            <div class="layui-input-block">
                                <textarea name="remark" placeholder="如有特殊需求，请在此说明" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        
                        <!-- 隐私政策同意 -->
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <input type="checkbox" name="agree" required lay-verify="required" title="我已阅读并同意《蓝天驾校隐私政策》">
                            </div>
                        </div>
                        
                        <!-- 提交按钮 -->
                        <div class="layui-form-item text-center">
                            <button type="submit" class="layui-btn layui-btn-normal layui-btn-lg px-12" lay-submit lay-filter="submitEnroll">
                                提交报名信息
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- 课程介绍 -->
    <section id="courses" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-2xl md:text-3xl font-bold text-dark mb-4">选择适合您的课程</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">我们提供多种类型的驾驶培训课程，满足不同学员的需求，无论您是初学者还是有一定驾驶经验，都能在这里找到适合自己的课程。</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- 课程卡片 1 -->
                <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover">
                    <div class="relative">
                        <img src="https://picsum.photos/id/1072/600/400" alt="C1手动挡" class="w-full h-56 object-cover">
                        <div class="absolute top-4 left-4 bg-primary text-white text-sm font-bold px-3 py-1 rounded-full">
                            热门
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-4">
                            <h3 class="text-xl font-bold text-dark">C1手动挡</h3>
                        </div>
                        <p class="text-gray-600 mb-4">适合大多数初学者的标准课程，掌握手动挡汽车驾驶技能，考取C1驾驶证。</p>
                        
                        <!-- 课程特点 -->
                        <div class="space-y-2 mb-6">
                            <div class="flex items-center text-gray-600">
                                <i class="fa fa-check text-primary mr-2"></i>
                                <span>包含科目二五项+科目三路考</span>
                            </div>
                            <div class="flex items-center text-gray-600">
                                <i class="fa fa-check text-primary mr-2"></i>
                                <span>提供接送服务</span>
                            </div>
                            <div class="flex items-center text-gray-600">
                                <i class="fa fa-check text-primary mr-2"></i>
                                <span>1对1或多人教学可选</span>
                            </div>
                        </div>
                        
                        <div class="flex justify-between items-center">
                            <span class="text-primary font-bold text-2xl">¥3880</span>
                            <button type="button" class="layui-btn layui-btn-primary" onclick="selectCourse('C1手动挡 - ¥3880')">
                                选择此课程
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 课程卡片 2 -->
                <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover">
                    <div class="relative">
                        <img src="https://picsum.photos/id/1073/600/400" alt="C2自动挡" class="w-full h-56 object-cover">
                        <div class="absolute top-4 left-4 bg-secondary text-white text-sm font-bold px-3 py-1 rounded-full">
                            推荐
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-4">
                            <h3 class="text-xl font-bold text-dark">C2自动挡</h3>
                        </div>
                        <p class="text-gray-600 mb-4">适合女性和对驾驶技术要求较低的学员，学习自动挡汽车驾驶，考取C2驾驶证。</p>
                        
                        <!-- 课程特点 -->
                        <div class="space-y-2 mb-6">
                            <div class="flex items-center text-gray-600">
                                <i class="fa fa-check text-primary mr-2"></i>
                                <span>操作简单，易上手</span>
                            </div>
                            <div class="flex items-center text-gray-600">
                                <i class="fa fa-check text-primary mr-2"></i>
                                <span>通过率高</span>
                            </div>
                            <div class="flex items-center text-gray-600">
                                <i class="fa fa-check text-primary mr-2"></i>
                                <span>快速拿证</span>
                            </div>
                        </div>
                        
                        <div class="flex justify-between items-center">
                            <span class="text-primary font-bold text-2xl">¥4280</span>
                            <button type="button" class="layui-btn layui-btn-primary" onclick="selectCourse('C2自动挡 - ¥4280')">
                                选择此课程
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 课程卡片 3 -->
                <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover">
                    <div class="relative">
                        <img src="https://picsum.photos/id/1074/600/400" alt="VIP快速班" class="w-full h-56 object-cover">
                        <div class="absolute top-4 left-4 bg-accent text-white text-sm font-bold px-3 py-1 rounded-full">
                            VIP
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-4">
                            <h3 class="text-xl font-bold text-dark">VIP快速班</h3>
                        </div>
                        <p class="text-gray-600 mb-4">专为时间紧张的学员定制，一对一教学，优先安排考试，快速拿证。</p>
                        
                        <!-- 课程特点 -->
                        <div class="space-y-2 mb-6">
                            <div class="flex items-center text-gray-600">
                                <i class="fa fa-check text-primary mr-2"></i>
                                <span>一对一专属教练</span>
                            </div>
                            <div class="flex items-center text-gray-600">
                                <i class="fa fa-check text-primary mr-2"></i>
                                <span>优先安排练车和考试</span>
                            </div>
                            <div class="flex items-center text-gray-600">
                                <i class="fa fa-check text-primary mr-2"></i>
                                <span>45天拿证保障</span>
                            </div>
                        </div>
                        
                        <div class="flex justify-between items-center">
                            <span class="text-primary font-bold text-2xl">¥6880</span>
                            <button type="button" class="layui-btn layui-btn-primary" onclick="selectCourse('VIP快速班 - ¥6880')">
                                选择此课程
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 常见问题 -->
    <section id="faq" class="py-16 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-2xl md:text-3xl font-bold text-dark mb-4">常见问题</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">以下是学员经常问到的问题，如果您有其他疑问，欢迎随时联系我们。</p>
            </div>
            
            <div class="max-w-3xl mx-auto">
                <div class="layui-collapse" lay-accordion>
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title">报名需要准备哪些材料？</h2>
                        <div class="layui-colla-content">
                            <p>报名时需要准备：身份证原件及复印件、一寸白底照片6张、外地学员需提供居住证。报名时我们会有工作人员协助您完成所有手续。</p>
                        </div>
                    </div>
                    
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title">从报名到拿证需要多长时间？</h2>
                        <div class="layui-colla-content">
                            <p>一般情况下，C1/C2普通班从报名到拿证大约需要2-3个月，VIP快速班大约需要45天左右。具体时间取决于个人学习进度和考试安排。</p>
                        </div>
                    </div>
                    
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title">考试不通过怎么办？</h2>
                        <div class="layui-colla-content">
                            <p>如果考试不通过，我们会为您安排补考。根据规定，每个科目有5次补考机会。补考需要缴纳相应的补考费，具体费用以车管所规定为准。我们的教练会针对您的薄弱环节进行强化训练，帮助您顺利通过考试。</p>
                        </div>
                    </div>
                    
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title">可以自己选择教练吗？</h2>
                        <div class="layui-colla-content">
                            <p>是的，报名时您可以根据自己的需求选择心仪的教练。我们的教练团队都经过严格筛选和培训，教学经验丰富，您可以根据教练的评价和教学风格进行选择。</p>
                        </div>
                    </div>
                    
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title">练车时间如何安排？</h2>
                        <div class="layui-colla-content">
                            <p>我们提供灵活的练车时间安排，包括工作日、周末和节假日。您可以根据自己的时间预约练车，一般提前1-2天预约即可。VIP班学员享有优先预约权。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系我们 -->
    <section id="contact" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-2xl md:text-3xl font-bold text-dark mb-4">联系我们</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">如果您有任何疑问或需要更多信息，请通过以下方式联系我们，我们将竭诚为您服务。</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-white rounded-xl p-8 text-center shadow-md card-hover">
                    <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center text-primary text-2xl mb-4 mx-auto">
                        <i class="fa fa-phone"></i>
                    </div>
                    <h3 class="text-xl font-bold text-dark mb-2">电话咨询</h3>
                    <p class="text-gray-600 mb-4">工作时间: 9:00-18:00</p>
                    <a href="tel:4008123456" class="text-primary font-bold text-lg">400-812-3456</a>
                </div>
                
                <div class="bg-white rounded-xl p-8 text-center shadow-md card-hover">
                    <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center text-primary text-2xl mb-4 mx-auto">
                        <i class="fa fa-envelope"></i>
                    </div>
                    <h3 class="text-xl font-bold text-dark mb-2">电子邮箱</h3>
                    <p class="text-gray-600 mb-4">我们会在24小时内回复</p>
                    <a href="mailto:info@lantian-driving.com" class="text-primary font-bold">info@lantian-driving.com</a>
                </div>
                
                <div class="bg-white rounded-xl p-8 text-center shadow-md card-hover">
                    <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center text-primary text-2xl mb-4 mx-auto">
                        <i class="fa fa-map-marker"></i>
                    </div>
                    <h3 class="text-xl font-bold text-dark mb-2">总部地址</h3>
                    <p class="text-gray-600">北京市朝阳区北苑路88号蓝天大厦5层</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-dark text-white pt-16 pb-8">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
                <div>
                    <div class="flex items-center space-x-2 mb-6">
                        <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center">
                            <i class="fa fa-car text-white"></i>
                        </div>
                        <span class="text-xl font-bold">蓝天驾校</span>
                    </div>
                    <p class="text-gray-400 mb-6">专业驾驶培训，让您轻松考取驾照，开启安全驾驶之旅。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center hover:bg-primary/40 transition-colors">
                            <i class="fa fa-weixin"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center hover:bg-primary/40 transition-colors">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center hover:bg-primary/40 transition-colors">
                            <i class="fa fa-qq"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-6">快速链接</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                        <li><a href="#courses" class="text-gray-400 hover:text-white transition-colors">课程介绍</a></li>
                        <li><a href="#facilities" class="text-gray-400 hover:text-white transition-colors">训练场</a></li>
                        <li><a href="#coaches" class="text-gray-400 hover:text-white transition-colors">教练团队</a></li>
                        <li><a href="#faq" class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
                        <li><a href="#contact" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-6">联系方式</h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker text-primary mt-1 mr-3"></i>
                            <span class="text-gray-400">北京市朝阳区北苑路88号蓝天大厦5层</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-phone text-primary mt-1 mr-3"></i>
                            <span class="text-gray-400">400-812-3456</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-envelope text-primary mt-1 mr-3"></i>
                            <span class="text-gray-400">info@lantian-driving.com</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-clock-o text-primary mt-1 mr-3"></i>
                            <span class="text-gray-400">周一至周日 9:00-18:00</span>
                        </li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-6">关注我们</h3>
                    <p class="text-gray-400 mb-4">扫描二维码关注公众号，获取最新优惠信息</p>
                    <div class="bg-white p-2 inline-block rounded-lg">
                        <img src="https://picsum.photos/id/1/120/120" alt="微信公众号" class="w-24 h-24">
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-800 pt-8">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2025 蓝天驾校 版权所有 | 京ICP备12345678号</p>
                    <div class="flex space-x-6">
                        <a href="#" class="text-gray-500 hover:text-white text-sm">隐私政策</a>
                        <a href="#" class="text-gray-500 hover:text-white text-sm">服务条款</a>
                        <a href="#" class="text-gray-500 hover:text-white text-sm">网站地图</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button id="backToTop" class="fixed bottom-8 right-8 bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-secondary">
        <i class="fa fa-arrow-up"></i>
    </button>

    <script>
       
        
        // 返回顶部功能
        document.getElementById('backToTop').addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
        
        // 移动端菜单切换
        // document.getElementById('menuBtn').addEventListener('click', function() {
        //     const mobileMenu = document.getElementById('mobileMenu');
        //     mobileMenu.classList.toggle('hidden');
        // });
        
        // 平滑滚动到锚点
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    targetElement.scrollIntoView({
                        behavior: 'smooth'
                    });
                    
                    // 如果是移动端，点击后关闭菜单
                    const mobileMenu = document.getElementById('mobileMenu');
                    if (!mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.add('hidden');
                    }
                }
            });
        });
        
        // 初始化轮播
        layui.use('carousel', function(){
            const carousel = layui.carousel;
            carousel.render({
                elem: '#test1',
                width: '100%',
                height: 'auto',
                interval: 5000
            });
        });
        
        // 选择课程功能
        function selectCourse(courseName) {
            document.querySelector('select[name="course"]').value = courseName;
            document.querySelector('select[name="course"]').classList.add('layui-form-selected');
            
            // 滚动到表单
            document.getElementById('enroll-form').scrollIntoView({
                behavior: 'smooth'
            });
        }
        
       // 表单提交处理
layui.use(['form', 'layer'], function(){
    const form = layui.form;
    const layer = layui.layer;

    // 监听表单提交
    form.on('submit(submitEnroll)', function(data){
        // 打印表单数据（可用于调试）
        console.log('表单数据：', data.field);

        // 发送 POST 请求到后端
        fetch('/api/xueyuan/add', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data.field)  // 将表单数据转为 JSON 格式
        })
        .then(response => response.json())  // 解析返回的 JSON 数据
        .then(res => {
            if (res===true) {  // 假设后端返回 code 200 表示成功
                layer.msg('报名信息提交成功！我们的顾问将尽快与您联系。', {
                    icon: 1,
                    time: 3000
                }, function () {
                    // 提交成功后重置表单
                    document.querySelector('form').reset();
                });
            } else {
                layer.msg('提交失败，请稍后再试。', { icon: 2, time: 3000 });
                console.error('后端错误:', res);
            }
        })
        .catch(error => {
            layer.msg('网络异常，请检查您的连接。', { icon: 5, time: 3000 });
            console.error('请求出错:', error);
        });

        // 阻止表单默认提交行为
        return false;
    });
});


// 导航栏滚动效果
window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 50) {
                header.classList.add('shadow-md');
                header.style.padding = '10px 0';
            } else {
                header.classList.remove('shadow-md');
                header.style.padding = '15px 0';
            }
        });
    </script>
</body>
</html>    